<template>
  <div class="layout-main-conent">
    <!-- 第一板块 -->
      <el-card class="is-never-shadow cus-card background-card" style="margin-bottom: 15px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row :gutter="20" class="is-justify-end flex-wrap=wrap" type="flex" style="margin-left: -8px;margin-right: -8px;">
            <el-col :span="6">
              <el-form-item label="用户名">
                <el-input v-model="form.input" placeholder="请输入用户名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="学工号">
                <el-input v-model="form.input" placeholder="请输入学工号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别">
                <el-input v-model="form.input" placeholder="请输入性别"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="角色">
                <el-input v-model="form.input" placeholder="请输入角色"></el-input>
              </el-form-item>
            </el-col>
            <div>
              <el-button type="primary" plain>查询</el-button>
              <el-button plain>刷新</el-button>
            </div>
          </el-row>
        </el-form>
      </el-card>
    <!-- 第二板块 -->
      <el-card class="is-never-shadow cus-card">
        <!-- 按钮 -->
        <div slot="header" class="el-card__header">
          <el-row class="two">
            <el-col class="el-col-8 d-flex align-items-center">
              <el-button type="primary" plain>新增</el-button><br/>
              <el-button type="primary" plain>导入</el-button><br/>
              <el-button type="primary" plain>模版</el-button><br/>
            </el-col>
            <el-col class="el-col-16 align-items-center"></el-col>
          </el-row>
        </div>
        <!-- 表格 -->
        <div class="el-card__body">
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="number" label="序号"> </el-table-column>
            <el-table-column prop="user" label="用户ID"> </el-table-column>
            <el-table-column prop="student" label="学工号"> </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="gender" label="性别"> </el-table-column>
            <el-table-column prop="grade" label="年级"> </el-table-column>
            <el-table-column prop="role" label="角色"> </el-table-column>
            <el-table-column prop="notes" label="备注"> </el-table-column>
            <el-table-column prop="operate" label="操作" min-width="160px">
              <el-button type="text">详情</el-button>
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>
      </el-card>
  </div>
</template>

<script>
export default {
    data() {
      return {
        form: {
          input: ''
        },
        tableData: [{
          number: '1',
          user: '01',
          student: '2101',
          name: '祁千钧',
          gender: '男',
          grade: '2021',
          role: 'admin',
          notes: '',
          operate: ''
        }, {
          number: '2',
          user: '02',
          student: '2102',
          name: '章凌行',
          gender: '男',
          grade: '2021',
          role: 'admin',
          notes: '',
          operate: ''
        }, {
          number: '3',
          user: '03',
          student: '2103',
          name: '凤秋歆',
          gender: '男',
          grade: '2021',
          role: 'admin',
          notes: '',
          operate: ''
        }, {
          number: '4',
          user: '04',
          student: '2104',
          name: '葛舒竹',
          gender: '男',
          grade: '2021',
          role: 'admin',
          notes: '',
          operate: ''
        }, {
          number: '5',
          user: '05',
          student: '2105',
          name: '明斐',
          gender: '男',
          grade: '2021',
          role: 'admin',
          notes: '',
          operate: ''
        }, {
          number: '6',
          user: '06',
          student: '2106',
          name: '秦继风',
          gender: '男',
          grade: '2021',
          role: 'admin',
          notes: '',
          operate: ''
        }, {
          number: '7',
          user: '07',
          student: '2107',
          name: '裴晏',
          gender: '男',
          grade: '2021',
          role: 'admin',
          notes: '',
          operate: ''
        }],
        multipleSelection: []
      }
    },

    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }

</script>

<style scoped>
.layout-main-conent {
    margin: 24px;
    position: relative;
}

.el-row.is-justify-end {
    justify-content: flex-end;
}
.el-row--flex.is-justify-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: center;
}
.flex-wrap-wrap {
    flex-wrap: wrap;
}
.el-row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
}
/* 背景图 */
.background-card {
  background-image: url('./bg2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.el-card__header {
    padding: calc(var(--el-card-padding) - 2px) var(--el-card-padding);
    border-bottom: 1px solid var(--el-card-border-color);
    box-sizing: border-box;
}
.el-row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
}

.el-col-8 {
    display: block;
    max-width: 33.3333333333%;
    flex: 0 0 33.3333333333%;
}
.align-items-center {
    align-items: center !important;
}
.d-flex {
    display: flex !important;
}
.el-col-8 {
    display: block;
    max-width: 33.3333333333%;
    flex: 0 0 33.3333333333%;
}
.text-align-right {
    display: flex;
    align-content: center;
    justify-content: end;
}
.el-col-16 {
    display: block;
    max-width: 66.6666666667%;
    flex: 0 0 66.6666666667%;
}
.el-button--text {
    border-color: transparent;
    background: transparent;
    color: #88dbb4e7;
    padding-left: 0;
    padding-right: 0;
}
.el-button > span {
    display: inline-flex;
    align-items: center;
}
.el-table .cell {
  width: 130px;
}
</style>